import React from 'react';
import $ from 'webpack-zepto';
require('./../../../css/activity.css');
/**
 * 活动首页alert组件
 *
 * 当后端告知有活动时显示;
 * 当活动类型为加价购时显示该组件;
 *
 * 动画效果又css定义
 */
var scope;
export default class Activity extends React.Component {

    static get defaultProps(){
        return {
            type : 'fade', //渐入渐出
            img : 'images/activity_add.png'
        }
    };

    static get propTypes(){
        return {
            img : React.PropTypes.string.isRequired,//背景图,必要参数
            type : React.PropTypes.string.isRequired, //动画类型,必要参数,提供默认类型
            title : React.PropTypes.string, //标题,非必要参数
            desc : React.PropTypes.string //活动描述,非必要参数
        };
    };

    constructor(props){
        super(props);
        scope = this;
    };

    componentDidMount(){
        var type = this.props.type;
        if('fade' == type){
            this.fadeIn();
        }
    };

    render(){
        var title = this.props.title ? this.title(this.props.title) : '';
        var advertisement = this.props.img ? this.advertisement(this.props.img) : '';
        var desc = this.props.desc ? this.desc(this.props.desc) : '';
        return (
            <div className="activity">
                <div className="activity-content">
                    {title}
                    {advertisement}
                    {desc}
                    <img className="close-icon" src="images/hang_close.png" alt="关闭" onClick={this.close} />
                </div>
            </div>
        );
    };

    close(){
        var type = scope.props.type;
        if('fade' == type){
            scope.fadeOut();
        }
    };
    
    title(title){
        return  (
            <h2 className="activity-title">{title}</h2>
        );
    };

    advertisement(img){
        return  (
            <img className="activity-advertisement" src={img} alt="活动广告图" />
        );
    };
    
    desc(desc){
        return  (
            <div className="activity-desc">{desc}</div>
        );
    };
    
    fadeIn(){
        window.setTimeout(function () {
            $('.activity').attr('style','display:block;');
            $('.activity').addClass('fade-in');
        },100);
    };
    
    fadeOut(){
        $('.activity').removeClass('fade-in').addClass('fade-out');
        window.setTimeout(function () {
            $('.activity').attr('style','display:none;');
        },200);
    };
};

